/* General Styles
   Styles of base elements */

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(225, 235, 245, 0.9) !important;
  color: black !important;
  text-shadow: black 0 0 0 !important;
  -webkit-text-fill-color: initial;
}

a:focus,
button:focus,
a:hover,
button:hover {
  outline: none;
  position: relative;
}

a:focus,
button:focus,
.button:focus,
button:focus-within,
.button:focus-within {
  position: relative;

  @extend %selectionBox;
}

html, body {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: slashed-zero;
  font-size: $font-size-base;
  line-height: $font-line-height;
  color: $color-off-white;
  text-shadow: black 0 2px 0;

  @media screen and (max-width: 680px) {
    font-size: $font-size-mobile;
  }
}

html {
  background-color: rgb(41, 40, 45);
  background-image: url($baseurl + '/images/bg-texture.jpg');
  background-size: 600px 600px;
}

body {
  background-position-y: -60px;
  background-image: url($baseurl + '/images/bg-logos.png');
}

h1, h2, h3, h4, h5, h6 {
  line-height: 125%;
  font-family: 'Jost', Futura, sans-serif;
  color: white;
  margin: 1.5rem 0 1rem 0;
  text-shadow: none;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h6 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p {
}

a > h1,
a > h2,
a > h3,
a > h4 {
  text-decoration: underline;
  text-decoration-color: rgb(255, 17, 17);
  text-underline-offset: 0.25rem;
}

a:hover > h1,
a:hover > h2,
a:hover > h3,
a:hover > h4 {
  text-decoration-color: rgb(255, 115, 115);
}

a {
  font-weight: bold;
  color: white;
  text-decoration: underline;
  text-decoration-color: rgb(255, 17, 17);
  text-underline-offset: 1px;
  -webkit-text-underline-position: under;
  -ms-text-underline-position: below;
  text-underline-position: under; 

  &:hover {
    position: relative;
    text-decoration-color: rgb(255, 115, 115);
  }
}

strong, em {
  color: white;
}

lite-youtube {
  margin: 1.5rem auto;
  max-width: 720px;
}

fieldset {
  border: none;
  margin: 1rem 0;
  padding: 0;
}

label {
  cursor: pointer;

  input {
    margin-right: 0.5rem;
  }

  input[type="checkbox"],
  input[type="radio"] {
    pointer-events: none;
  }
}

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-width: 1px;
  border-bottom-color: rgb(75, 75, 75);
  border-right-color: rgb(90, 90, 90);
  border-top-color: rgb(40, 40, 40);
  border-left-color: rgb(55 ,55 ,55 );
  border-style: solid;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 4px;
  background: black;
  box-shadow:
    inset rgba(0, 0, 0, 0.75) 2px 2px 2px,
    rgba(255, 0, 0, 0) 0 0 5px,
    rgba(255, 0, 0, 0.5) 0 0 0;
  transition-property: border-color, background-color, box-shadow;
  transition-timing-function: $ease-in-out-quint;
  transition-duration: 200ms;

  &:focus {
    outline: none;
    background: rgb(220, 220, 220);
  }

  &:active {
    outline: none;
  }

  &:checked {
    background-color: lighten($color-red-alert, 20%);
    outline: none;
    border-bottom-color: rgb(150, 75, 75);
    border-right-color: rgb(180, 90, 90);
    border-top-color: rgb(80, 40, 40);
    border-left-color: rgb(110 ,55 ,55 );
    box-shadow:
      inset rgba(0, 0, 0, 0.5) 2px 2px 2px,
      red 0 0 25px,
      rgba(255, 0, 0, 0.5) 0 0 2px;
    animation-name: glow;
    animation-iteration-count: infinite;
    animation-duration: 3000ms;
    animation-timing-function: linear;
  }
}

input[type="radio"] {
  border-radius: 50%;
}

var {
  font-style: normal;
  font-weight: bold;
}

table {
  border-spacing: 0;
  border-collapse: separate;
  font-variant-numeric: slashed-zero tabular-nums;
}

.table--metal-panel {
  @include metalPanel();
  background-image: none;

  thead {
    th {
      @extend %scanlines;
      border-right: rgba(0, 0, 0, 0.25) 1px dotted;
      border-radius: 2px;

      &:first-child {
        border-top-left-radius: 5px;
      }
  
      &:last-child {
        border-top-right-radius: 5px;
        border-right: none;
      }
    }
  }

  td {
   border-bottom: none; 
  }
}

thead {
  a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding: 0.15rem 0.25rem;
    color: lighten($color-off-black, 0.25);
    text-decoration-color: $color-off-black;

    &:hover {
      color: black;
    }
  }
}

tbody {
  padding: 0.5rem;
}

th {
  border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
  padding: 0.25rem 1rem;
  text-align: left;
  font-size: 0.85em;
  font-family: $font-jost;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.75);
}

td {
  border-bottom: rgba(255, 255, 255, 0.25) 1px dotted;
  padding: 0.25rem 1rem;
}

tr {
  padding: 0.25rem;
}

tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.25);
}

.table--hover-rows {
  tr:hover {
    td {
      background-color: rgba(255, 201, 100, 0.1);
    }
  }
}

pre, code {
  font-family: Menlo, Consolas, monospace;
  font-size: 1rem;
  background: rgba(10, 10, 10, 0.5);
  color: rgba(200, 125, 125, 1);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

pre {
  overflow: auto;
}

dt {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  color: white;

  &:before {
    content: '';
    display: inline-block;
    margin: 0 1rem 0 -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: rgba(255, 255, 255, 0.3) 2px solid;
  }
}

dd {
  margin-left: 0;
  border-left: rgba(255, 255, 255, 0.3) 2px dotted;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
}

ul {
  padding-left: 1.5rem;

  > li {
    break-inside: avoid;
    margin-bottom: 0.2rem;
    padding-left: 0.25rem;

    &::marker {
      color: $color-command-and-conquer;
    }
  }
}

hr {
  border: none;
  border-top: rgba(255, 255, 255, 0.3) 2px dotted;
  margin: 1.5rem 0;
}

figure {
  background-color: rgba(255, 255, 255, 0.075);
  border-style: dashed;
  box-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0 0;
  border-color: rgba(255, 255, 255, 0.25);
  border-width: 1px;
  border-radius: 3px;
  margin: 1.5rem 0;
  padding: 3px;

  img, video, iframe {
    display: block;
    width: 100%
  }
}

figcaption {
  padding: 0.5rem;
  font-size: $font-size-small;
  line-height: 150%;
  text-align: center;
}